import React, { useEffect, useState } from 'react';
import { Select, Input, Radio, Modal, Form, InputNumber,Button } from 'antd';
import type { RadioChangeEvent, SelectProps } from 'antd';
import { getOne, getSet } from '@/apis/goodsCategory'
import MiUpload from '../../components/MiUpload'

type Props = {
    isUpdat: boolean,
    updatClose(value: boolean): void,
    dataChange: any
}
type SizeType = Parameters<typeof Form>[0]['size'];
const handle = (value: string) => {
    console.log(`selected ${value}`);
};
const Change = (value: number | null) => {
    console.log('changed', value);
};
interface CnData {
    icon: any;
    img: any;
    _id:any
}
const UpdaClassify = (props: Props) => {
    const [value, setValue] = useState(1);
    const [myArr, setMyArr] = useState<any[]>([]);
    const [imgUrl, setImgUrl] = useState('');
    const [dataCn, setDataCn] = useState([])
    const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');
    const [form] = Form.useForm();
    const [list, setList] = useState([
        { value: 'jack', label: 'Jack' },
        { value: 'lucy', label: 'Lucy' },
        { value: 'Yiminghe', label: 'yiminghe' },
        { value: 'disabled', label: 'Disabled', disabled: true },
    ])

    useEffect(() => {
        fetchData()
    }, [])

    useEffect(() => {
        console.log("111", props.dataChange);
        console.log('58', props.dataChange.state)
        form.setFieldsValue(props.dataChange);
        setDataCn(props.dataChange);
    }, [props.dataChange])

    useEffect(() => {
        console.log(list);
        const arr = list.map((item: any) => {
            return { value: item._id, label: item.title }
        })
        console.log('arr', arr);
        setMyArr(arr)
    }, [list])

    const setImg = (img: any) => {
        console.log("img", img)
        setImgUrl(img.path);

    }
    const getImg = (val: any) => {
        console.log("mm", val);
    }

    const onFinish = async (values: any) => {
        if(values.state){
            values.state=1
        } else{
            values.state=0
        }
        values._id=dataCn._id
        const res = await getSet(values)
        console.log("55555", values);
        console.log("resssss", res)
    }

    const fetchData = async () => {
        const res = await getOne()
        console.log("1234", res.data);
        setList(res.data);
    }

    const onChange = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    const handleOk = async () => {

        props.updatClose(false);
    };
    const handleCancel = () => {
        props.updatClose(false);

    };

    const onFormLayoutChange = ({ size }: { size: SizeType }) => {
        setComponentSize(size);
    };

    return (
        <div>
            <Modal title="添加分类" open={props.isUpdat} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    initialValues={{ size: componentSize }}
                    onValuesChange={onFormLayoutChange}
                    size={componentSize as SizeType}
                    style={{ maxWidth: 600 }}
                    form={form}
                    onFinish={onFinish}
                >
                    <Form.Item label="上级分类：" name='title'>
                        <Select
                            defaultValue=""
                            style={{ width: 274 }}
                            onChange={handle}
                            options={myArr}
                        />
                    </Form.Item>
                    <Form.Item name='title' label="分类名称：">
                        <Input />
                    </Form.Item>
                    <Form.Item label='分类图标' name='icon'>
                        <MiUpload setImg={setImg} imageMan={dataCn.icon}></MiUpload>
                    </Form.Item>
                    <Form.Item label='分类大图'>
                        <MiUpload setImg={getImg} imageMan={dataCn.img}></MiUpload>
                    </Form.Item>
                    <Form.Item name='sort' label="排序：">
                        <InputNumber min={0} max={100} defaultValue={0} onChange={Change} />
                    </Form.Item>

                    <Form.Item name='state' label='状态'>
                        <Radio.Group onChange={onChange} defaultValue={props.dataChange.state}>
                            <Radio value={true}>显示</Radio>
                            <Radio value={false}>隐藏</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">保存</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default UpdaClassify